<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>已完成的事情</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mitt@2.1.0/dist/mitt.umd.js"></script>
  <style>
    .list-move,
    .list-enter-active,
    .list-leave-active {
      transition: all 0.5s ease;
    }

    .list-enter-from,
    .list-leave-to {
      opacity: 0;
      transform: translateX(30px);
    }

    .list-leave-active {
      position: absolute;
    }

    body {
      font-family: Arial, sans-serif;
      font-size: 16px;
    }


    #app {
      background-color: antiquewhite;
      width: 20rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 50px;
      padding: auto;
    margin: auto;
    }


    input[type="text"] {
      padding: 10px;
      border-radius: 5px;
      border: 1px solid black;
      margin-right: 10px;
    }

    /* button {
      padding: 10px;
      border-radius: 5px;
      border: none;
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
    } */

    h2 {
      font-size: 24px;
      margin-top: 30px;
      margin-bottom: 10px;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 10px;
      background-color: #f2f2f2;
    }

   .btn {
      padding: 5px;
      border-radius: 5px;
      border: none;
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
    }
    /* 清除按钮 */
    .btn1{
     background-image: url(./img/1.png);
     background-repeat: no-repeat;
     background-size: 50% 50%s;
     height: 2rem;
    }
  </style>
</head>

<body>
  <div id="app">
    <!--添加新代办  -->
    <input type="text" v-model="things"><button @click="addThings" class="btn">+</button> <button
      @click="clearAllThings" class="btn1">清除所有任务</button>
    <my-component :incomplete="listThings"></my-component>
    <my-componenttwo ref="componentTwoRef"></my-componenttwo>
  </div>
  <template id="child-template">
     <!-- 未完成 -->
    <h2>待定列表</h2>
    <transition-group name="list" tag="ul">
       <!-- 完成按钮 -->
      <li v-for="(item,index) in incomplete" :key="item">{{item}} <button
          @click="haveCompletedThings(item,index)">√</button></li>
    </transition-group>

  </template>
  <template id="child-templateTwo">
    <h2>已完成列表</h2>
     <!-- 已完成列表 -->
    <transition-group name="list" tag="ul">
        <!-- 删除按钮 -->
      <li v-for="(item,index) in haveCompleted" :key="item">{{item}}<button @click="delIncomplete(index)">×</button>
      </li>
    </transition-group>
  </template>
  <script>
    const emitter = window.mitt()
    const { ref, reactive, provide, inject } = Vue
    const app = Vue.createApp({
      setup (props) {
        const things = ref("")
        const listThings = ref([])
        const componentTwoRef = ref(null)
        const addThings = () => {
          listThings.value.push(things.value)
        }
        const clearAllThings = () => {
          listThings.value = []
          console.log(componentTwoRef)
          componentTwoRef.value.clearHaveCompletedThings()
        }

        return { things, addThings, listThings, clearAllThings, componentTwoRef }
      }
    })
    app.component('my-component', {
      template: "#child-template",
      props: {
        incomplete: {
          type: Array,
          default: []
        }
      },
      setup (props) {
        const haveCompletedThings = (item, index) => {
          emitter.emit('busEmit', item)
          props.incomplete.splice(index, 1)
        }

        return { haveCompletedThings, }
      }
    })
    app.component('my-componenttwo', {
      template: "#child-templateTwo",
      setup () {
        const haveCompleted = ref([])
        emitter.on('busEmit', (v) => {
          haveCompleted.value.push(v)
        })
        const delIncomplete = (index) => {
          haveCompleted.value.splice(index, 1)
        }
        const clearHaveCompletedThings = () => {
          haveCompleted.value = []
        }
        return { haveCompleted, delIncomplete, clearHaveCompletedThings }
      }
    })
    app.mount('#app')

  </script>

</body>

</html>